<template>
  <div class="login_dialog_container">
    <div class="dialog">
      <div class="title_box">
        <div>Sign Up</div>
        <img src="@/assets/common/close.png">
      </div>
      <div class="form_area">
        <div class="form_item half">
          <div class="label">Name</div>
          <div class="value">
            <input v-model="value" placeholder="Enter Your Name"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">Gender</div>
          <div class="value">
            <el-select
              v-model="value"
              placeholder="Select"
              :suffix-icon="ArrowDownIcon"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="form_item">
          <div class="label">Company</div>
          <div class="value">
            <input v-model="value" placeholder="Enter Your Company"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">Industry</div>
          <div class="value">
            <select-box v-model="value" placeholder="Select Your Industry"></select-box>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">Job Title</div>
          <div class="value">
            <select-box v-model="value" placeholder="Select Your Job Title"></select-box>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">E-mail</div>
          <div class="value">
            <input v-model="value" placeholder="Enter Your E-mail"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">Nationality</div>
          <div class="value">
            <select-box v-model="value" placeholder="Select Your Nationality"></select-box>
          </div>
        </div>
        <div class="form_item">
          <div class="label">Description</div>
          <div class="value">
            <input v-model="value" placeholder="Enter Your Description"/>
          </div>
        </div>
      </div>
      <button @click="submit">Sign Up</button>
      <div class="text_box">
        <div>I Already have an account?<span class="green_text">Sign in</span></div>
      </div>
    </div>

    <div class="mask"></div>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
import ArrowDownIcon from "@/components/ArrowDownIcon/index.vue";

const value = ref("")


const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]


//提交
function submit(){
  console.log(value.value)
}
</script>

<style lang="scss" scoped>
.login_dialog_container {
  padding: 24px;
  background-color: #fff;
  border-radius: 24px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 20;
  padding: 24px;
  border-radius: 24px;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #1C1E24;

  img {
    width: 24px;
    height: 24px;
  }
}

.form_area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 432px;
  margin-top: 24px;

  .form_item {
    margin-top: 16px;
    width: 100%;

    .label {
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: normal;
      color: #808690;
      margin-bottom: 8px;
    }

    .value {
      background: #F0F2F7;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: normal;
      color: #1C1E24;
      height: 40px;
      border-radius: 8px;

      input {
        width: 100%;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 8px 12px;
        border-radius: 8px;
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      ::v-deep .el-select__wrapper {
        padding: 6px 12px !important;
        box-sizing: border-box;
        border-radius: 8px;
        background: #F0F2F7;
        box-shadow: none;
        font-size: 14px;
        line-height: 20px;
        color: #808690;
        ::v-deep .el-select__selection .el-select__selected-item .el-select__selected-item span{
          color: pink !important;
        }
      }



      .el-select-dropdown-item {
        // 修改当前选中选项的文字显示颜色
        color: pink !important;
      }
    }
  }

  form_item:first-child {
    margin-top: 0;
  }

  .half {
    width: 48%;
  }
}

.text_box {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: right;
  letter-spacing: normal;
  justify-content: center;
  color: #1C1E24;
  margin-top: 24px;
}

.green_text {
  color: #1e90ff;
  margin-left: 8px;
}

button {
  border-radius: 8px;
  background: #1e90ff;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  letter-spacing: normal;
  color: #FFFFFF;
  width: 100%;
  padding: 8px 16px;
  margin-top: 24px;
}
</style>
